<template>
  <div style="padding: 30px">
    <h4
      style="
        font-weight: 700;
        font-style: normal;
        font-size: 24px;
        color: #344563;
      "
    >
      新增领料单
    </h4>
    <el-form ref="form" :model="form" label-width="80px">
      <div style="display: flex">
        <div class="block">
          <span class="demonstration">单据日期</span>
          <el-date-picker v-model="value1" type="date" placeholder="选择日期">
          </el-date-picker>
        </div>
        <el-form-item label="领料单号">
          <el-input v-model="form.region"></el-input>
        </el-form-item>
        <el-form-item label="领料部门">
          <el-select v-model="form.regionsd" placeholder="选择部门">
            <el-option label="维修一部" value="shanghai"></el-option>
            <el-option label="维修二部" value="beijing"></el-option>
            <el-option label="维修三部" value="beijinga"></el-option>
          </el-select>
        </el-form-item>
      </div>
      <el-form-item label="活动形式">
        <el-input type="textarea" v-model="form.desc"></el-input>
      </el-form-item>

      <h4>器材列表</h4>
      <div style="display: flex">
        <el-form-item label="器材名称">
          <!-- <el-input v-model="form.qicai"></el-input> -->
          <div class="block">
            <el-cascader
              v-model="value"
              :options="options"
            ></el-cascader>
          </div>
        </el-form-item>
        <el-form-item label="入库数量">
          <el-input v-model="form.ruku"></el-input>
        </el-form-item>
      </div>
      <div style="display: flex">
        <el-form-item label="单价">
          <el-input v-model="form.danjia"></el-input>
        </el-form-item>
        <el-form-item label="金额">
          <span style="color: red">￥{{ 300 }}</span>
        </el-form-item>
        <el-row style="margin-left: 30px">
          <el-button type="primary">加入明细</el-button>
        </el-row>
      </div>

      <el-form-item>
        <el-button type="primary" @click="postData">立即创建</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        name: "",
        region: "",
        qicai: "",
        ruku: "",
        danjia: "",
        type: [],
        desc: "",
        regionsd: "",
      },
      value1: "",
      tableData: [],
      tableDat: [],
      keepManagement: "",
      name: "",
      value: [],
        options: [{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kekong',
              label: '可控'
            }]
          }, {
            value: 'daohang',
            label: '导航',
            children: [{
              value: 'cexiangdaohang',
              label: '侧向导航'
            }, {
              value: 'dingbudaohang',
              label: '顶部导航'
            }]
          }]
        }
        ]
      
    };
  },
  methods: {
    postData: function () {
      this.$axios({
        url: "/WPickingManagement/add",
        method: "post",
        data: {
          pickingDate: this.form.value1,
          pickingNo: this.form.region,
          wpickingDetailsAddDtos: [
            {
              pickingNo: this.form.region,
              quantity: this.form.ruku,
              unitPrice: this.form.danjia,
              wfacilityManagementId: 256960,
            },
          ],
        },
      }).then((res) => {
        if (res.data.code == 0) {
          this.$router.push("/home/Bmll");
        }
      });
    },
    getData: function () {
      this.$axios({
        url: "/WPickingManagement/addNo",
        methods: "get",
      }).then((res) => {
        if (res.data.code == 0) {
          this.form.region = res.data.data;
        }
      });
    },
    qicaiData: function () {
      this.$axios({
        url: "/wFacilityManagement/listName",
        methods: "get",
      }).then((res) => {
        if (res.data.code == 0) {
          this.tableDat = res.data.data;
          console.log(this.tableDat);
        }
      });
    },
    qicaiIdData: function () {
      this.$axios({
        url: "/wFacilityManagement/listMOdel",
        methods: "get",
        params: {
          facilityName: "千斤顶",
        },
      }).then((res) => {
        if (res.data.code == 0) {
          console.log(res.data.data);
          console.log(this.value);
        }
      });
    },
  },
  mounted: function () {
    this.getData();
    this.qicaiData();
    this.qicaiIdData();
  },
};
</script>